<template>
  <ArtTableFullScreen>
    <div class="account-page" id="table-full-screen">
      <!-- 搜索栏 -->
      <ArtSearchBar
        v-model:filter="searchData"
        :items="searchForm"
        @reset="searchReset"
        @search="getUserList"
      ></ArtSearchBar>

      <ElCard shadow="never" class="art-table-card">
        <!-- 表格头部 -->
        <ArtTableHeader
          :columnList="tableColumnOptions"
          v-model:columns="columnChecks"
          @refresh="getUserList"
        >
          <template #left>
            <ElButton @click="showDrawer('add')" v-ripple>新增用户</ElButton>
          </template>
        </ArtTableHeader>

        <!-- 表格 -->
        <ArtTable
          row-key="id"
          :loading="loading"
          :data="tableData"
          :currentPage="searchData.pageNum"
          :pageSize="searchData.pageSize"
          :total="100"
        >
          <template #default>
            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </ArtTable>

        <ElDrawer
          v-model="drawerVisible"
          :title="drawerType === 'add' ? '添加用户' : '编辑用户'"
          size="30%"
          align-center
        >
          <ElForm ref="formRef" :model="formData" :rules="rules" label-width="80px">
            <ElFormItem label="用户名" prop="username">
              <ElInput v-model="formData.nickName" />
            </ElFormItem>
            <ElFormItem label="手机号" prop="phone">
              <ElInput v-model="formData.phonenumber" />
            </ElFormItem>
            <ElFormItem label="性别" prop="gender">
              <ElSelect v-model="formData.status">
                <ElOption label="男" value="男" />
                <ElOption label="女" value="女" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="角色" prop="role">
              <ElSelect v-model="formData.roleId" multiple>
                <ElOption
                  v-for="role in roleList"
                  :key="role.roleCode"
                  :value="role.roleCode"
                  :label="role.roleName"
                />
              </ElSelect>
            </ElFormItem>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="drawerVisible = false">取消</ElButton>
              <ElButton type="primary" @click="handleSubmit">提交</ElButton>
            </div>
          </template>
        </ElDrawer>
      </ElCard>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import {
      columnChecks,
      columns,
      drawerType,
      drawerVisible,
      formData,
      handleSubmit, rules,
      searchData,
      searchForm,
      searchReset, showDrawer,
      tableColumnOptions
  } from './CurdData'

  onMounted(() => {
    getUserList()
    getRoleList()
  })
  import { UserService } from '@/service/UserService'
  import { ACCOUNT_TABLE_DATA, ROLE_LIST_DATA } from '@/service/mock/temp/formData'
  const tableTotal = ref(0)
  const loading = ref(false)
  // 表格数据
  const tableData = ref<any[]>([])
  const getUserList = async () => {
      loading.value = true
      const { rows,total } = await UserService.listUser(searchData)
      console.info(rows)
      tableData.value = rows
      tableTotal.value = total
      loading.value = false
      // setTimeout(() => {
      //     tableData.value = ACCOUNT_TABLE_DATA
      //     loading.value = false
      // }, 500)
  }

  const roleList = ref<any[]>([])
  const getRoleList = () => {
    roleList.value = ROLE_LIST_DATA
  }

</script>

<style lang="scss" scoped>
  .account-page {
    :deep(.user) {
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 6px;
      }

      > div {
        margin-left: 10px;

        .user-name {
          font-weight: 500;
          color: var(--art-text-gray-800);
        }
      }
    }
  }
</style>
